import React from "react";
import { Card } from 'antd';
import Router01 from "./router01"
import Router02 from "./router02"
import Router03 from "./router03"
import Router04 from "./router04"
import Router05 from "./router05"
import Router06 from "./router06"
import Router07 from "./router07"

import { BrowserRouter as Router, Route, Switch, Redirect, NavLink } from "react-router-dom";
class RouterList extends React.Component {
  render() {
    return (
      <div className="router">
        <Router>
          <div className="margin_left_sm">
            <h2>路由</h2>
            <ul className="nav2">
              <li><NavLink activeClassName="selected" to="/router/router01/4444">路由参数1</NavLink></li>
              <li><NavLink activeClassName="selected" to="/router/router02?id=99">路由参数2</NavLink></li>
              <li><NavLink activeClassName="selected" to="/cdx">重定向</NavLink></li>
              <li><NavLink activeClassName="selected" to="/router/router03">点击按钮跳转</NavLink></li>
              <li><NavLink activeClassName="selected" to="/router/router04">不是登录状态跳转路由首页</NavLink></li>
              <li><NavLink activeClassName="selected" to="/router/router05">withRouter 组建没有被路由管理</NavLink></li>
              <li><NavLink activeClassName="selected" to="/router/router06">Prompt组件</NavLink></li>
              <li><NavLink activeClassName="selected" to="/router/router07">路由嵌套</NavLink></li>
            </ul>
          </div>

          <hr />
          <div className="padding_h_sm margin_top_lg">
            <Card style={{ background: '#ECECEC' }}>
              <Switch>
                <Route path="/router/router01/:id?" render={(props) => <Router01 {...props} name="赵理通" />}></Route>
                <Route path="/router/router02" render={(props) => <Router02 {...props} />}></Route> {/* props 传递参数 :id? 可以没有参数  */}
                <Redirect from="/cdx" to="/router/router02?id=重定向" />
                <Route path="/router/router03" component={Router03}></Route>
                <Route path="/router/router04" component={Router04}></Route>
                <Route path="/router/router05" component={Router05}></Route>
                <Route path="/router/router06" component={Router06}></Route>
                <Route path="/router/router07" component={Router07}></Route>
              </Switch>
            </Card>
          </div>

        </Router>
      </div>
    );
  }
}

export default RouterList;
